<template>
    <div class="contact-list">
        <h1>日志管理</h1>
        <!--        <el-button type="primary" @click="addContactShow">导出日志</el-button>-->


        <el-table :data="tableData" stripe>
            <el-table-column fixed prop="operationTime" label="时间"></el-table-column>
            <el-table-column prop="userName" label="操作用户"></el-table-column>
            <el-table-column prop="operationType" label="操作类型"></el-table-column>
            <el-table-column prop="details" label="描述" :show-overflow-tooltip="true" width="300"></el-table-column>
            <el-table-column prop="ipAddress" label="登录地址"></el-table-column>
        </el-table>
        <div class="contact-list-page">
            <el-pagination v-if="tableData.length!==0"
                           @size-change="handleSizeChange"
                           @current-change="handleCurrentChange"
                           :current-page="queryFrom.current"
                           :page-sizes="[10, 30, 50, 100]"
                           :page-size="queryFrom.size"
                           layout="total, sizes, prev, pager, next, jumper"
                           :total="queryFrom.total">
            </el-pagination>
        </div>
    </div>
</template>

<script>
export default {
    name: 'LogList',
    data() {
        return {
            // 列表查询条件
            queryFrom: {
                // userId: null,
                // username: "",
                // name: "",
                // password: "",
                // // role: "student",
                // email: "",
                // phone: "",
                // classId: null,
                // className: ""

                total: 0,
                size: 10,
                current: 1,
                pages: 1,
            },
            tableData: [{
                date: '2016-05-03',
                name: '王小虎',
                province: '上海',
                city: '普陀区',
                address: '上海市普陀区金沙江路 1518 弄',
                zip: 200333
            }, {
                date: '2016-05-02',
                name: '王小虎',
                province: '上海',
                city: '普陀区',
                address: '上海市普陀区金沙江路 1518 弄',
                zip: 200333
            }, {
                date: '2016-05-04',
                name: '王小虎',
                province: '上海',
                city: '普陀区',
                address: '上海市普陀区金沙江路 1518 弄',
                zip: 200333
            }, {
                date: '2016-05-01',
                name: '王小虎',
                province: '上海',
                city: '普陀区',
                address: '上海市普陀区金沙江路 1518 弄',
                zip: 200333
            }, {
                date: '2016-05-08',
                name: '王小虎',
                province: '上海',
                city: '普陀区',
                address: '上海市普陀区金沙江路 1518 弄',
                zip: 200333
            }, {
                date: '2016-05-06',
                name: '王小虎',
                province: '上海',
                city: '普陀区',
                address: '上海市普陀区金沙江路 1518 弄',
                zip: 200333
            }, {
                date: '2016-05-07',
                name: '王小虎',
                province: '上海',
                city: '普陀区',
                address: '上海市普陀区金沙江路 1518 弄',
                zip: 200333
            }
            ],
        }
    },
    created() {
        this.getPage();
    },
    methods: {
        handleSizeChange(val) {
            // console.log(`每页 ${val} 条`);
            this.queryFrom.size = val
            this.getPage()
        },
        handleCurrentChange(val) {
            // console.log(`当前页: ${val}`);
            this.queryFrom.current = val
            this.getPage()
        },
        // 获取联系人分页
        async getPage() {
            // 获取通讯录列表
            this.$store.dispatch('getLogInfoPage', this.queryFrom).then(res => {
                // console.log("getContactPage =======> res.data =====>", res);
                if (res !== undefined && res.resultStatus === true) {
                    // console.log("res.resultData", res.resultData);
                    // console.log("res.resultData", res.resultData.records);
                    // this.$message.success(res.resultData);
                    this.tableData = res.resultData.records
                    this.queryFrom.total = res.resultData.total
                    this.queryFrom.size = res.resultData.size
                    this.queryFrom.current = res.resultData.current
                    this.queryFrom.pages = res.resultData.pages
                } else if (res !== undefined && res.resultStatus === false) {
                    // console.log("res.resultData", res.resultData);
                    this.$message.error(res.errorMessage);
                }
            }).catch(res => {
                this.$message.error("后台出问题啦！程序猿小哥正在紧急修复中！！！");
            });
        },

    }
}
</script>

<style scoped>
.contact-list {
    margin-top: 50px;
    display: block;
    width: 100%;
    height: 90%;
}

.contact-list-page {
    text-align: center;
    margin-top: 10vh;;
}

/* 设置显示隐藏部分内容，按50%显示 */
.el-tooltip__popper {
    font-size: 14px;
    max-width: 50%;
}

</style>